<template>
    <footer>
        <ul>
            <router-link to="/home" custom v-slot="{navigate,isActive}">
            <li @click="navigate" :class="isActive?'yifei':''">
            <i class="iconfont icon-store"></i>
            <span>首页</span>
            </li>
            </router-link>
        </ul>
         <ul>
            <router-link to="/chatlisth5" custom v-slot="{navigate,isActive}">
            <li @click="navigate" :class="isActive?'yifei':''">
            <i class="iconfont icon-comments"></i>
            <span>聊天室</span>
            </li>
            </router-link>
        </ul>
         <ul>
            <router-link to="/mycenter" custom v-slot="{navigate,isActive}">
            <li @click="navigate" :class="isActive?'yifei':''">
            <i class="iconfont icon-account"></i>
            <span>我的</span>
            </li>
            </router-link>
        </ul>
    </footer>
</template>
<style scoped lang="scss">
    .yifei {
        color:red;
    }
   footer {
        position: fixed;
        left:0;
        bottom:0;
        width:100%;
        height: 60px;
        line-height: 30px;
        background: white;
        z-index:100;
        display:flex;
        justify-content:space-evenly;
        ul{
            padding: 0;
            li{
                flex:1;
                text-align: center;
                display: flex;
                flex-direction: column;
                i{
                  font-size:20px
                }
                span{
                   font-size:10px
                }
            }
        }
    }
</style>
